<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Examples Method Demo</title>
</head>
<body>
    <h1>Examples Method Demo</h1>
    <hr>
    <div id="app">
        {{message}}
            <p><button onclick="destroy()">卸载</button></p>
    </div>
    <script type="text/javascript">
//  当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
	function tick(){
        vm.message="update message info ";
        vm.$nextTick(function(){
            console.log('message更新完后我被调用了');
        })
    }

//  vm.$forceUpdate()
    function destroy(){
	   vm.$destroy();
	}
      var jspang = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am JSPang'
              }
          }
      })
      var vm = new jspang().$mount("#app")
    </script>
</body>
</html>